<template>
  <div>
    <topNavBar :applyPageRoute="title" @back="fallback"></topNavBar>
    <a-card :bordered="false" :bodyStyle="{padding:'16px', height: '100%'}">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="学员姓名:">
                <a-input style="width:80%;" placeholder="请输入学员名称" v-model="keywords" @pressEnter="$refs.table.refresh(true)">
                  <a-tooltip slot="suffix" title="请输入学员姓名">
                    <a-icon type="search" style="color: rgba(0,0,0,.45)" @click="$refs.table.refresh(true)"/>
                  </a-tooltip>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="班级名称:">
                <a-select
                  placeholder="请选择班级"
                  style="width:80%;"
                  allowClear
                  v-model="queryParam.class_id"
                >
                  <a-select-option
                    :value="item.id"
                    v-for="(item,index) in classList"
                    :key="index"
                  >{{item.name}}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :md="8" :sm="24">
              <a-form-item label="上课老师:">
                <a-select
                  placeholder="请选择老师"
                  style="width:80%;"
                  allowClear
                  v-model="queryParam.teacher_id"
                >
                  <a-select-option
                    :value="item.id"
                    v-for="(item,index) in teacherList"
                    :key="index"
                  >{{item.name}}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <template v-if="advanced">
              <a-col :md="8" :sm="24">
                <a-form-item label="上课日期:">
                  <a-range-picker style="width:80%" @change="changeDate" />
                </a-form-item>
              </a-col>
            </template>
          </a-row>
        </a-form>
      </div>
      <a style="cursor:pointer" v-if="advanced" @click="more" id="moreButton">
        收起
        <a-icon type="up"></a-icon>
      </a>
      <a style="cursor:pointer" v-if="!advanced" @click="more" id="moreButton">
        展开
        <a-icon type="down"></a-icon>
      </a>
      <div style="margin-top:16px;">
          <s-table
            ref="table"
            :columns="columns"
            :data="loadData"
            class="user_management_table"
          >
            <div slot="comment" slot-scope="text,record">
              {{record.record||'--'}}
            </div>
            <div slot="score" slot-scope="text,record">
              <a @click="showModal(record.id)">{{record.score_obj.score}}</a>
            </div>
          </s-table>
        </div>
    </a-card>
  </div>
</template>

<script>
import topNavBar from '@/components/topNavBar/topNavBar'
import { STable } from '@/components'
import { teacherList } from '@/api/teacher'
import { classList } from '@/api/class'
import {studentcommentrecordList} from '@/api/afterClassComment'
export default {
  name: 'studentcommentrecord',
  components: {
    topNavBar,
    STable
  },
  data() {
    return {
      title: '点评记录',
      //搜索
      keywords:undefined,
      teacherList: undefined,
      classList: undefined,
      advanced: false,
      queryParam: {
        school_id: this.$store.state.user.school
      },
      columns:[
        {
          title:'评价时间',
          dataIndex: 'created_at',
        },
        {
          title:'老师',
          dataIndex: 'teacher.name',
        },
        {
           title:'班级名称',
           dataIndex: 'class_name',
        },
        {
           title:'内容',
           dataIndex: 'comment',
           width:500,
           scopedSlots: { customRender: 'comment' }
        },
        {
          title:'学员姓名',
          dataIndex: 'student.name',
        },
        {
          title:'查看状态',
        },
      ],
     // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return studentcommentrecordList(Object.assign(parameter, this.queryParam,{keywords:this.keywords})).then(res => {
          return res
        })
      },
    }
  },
  watch: {
    queryParam: {
      handler(newName, oldName) {
        this.$refs.table.refresh()
      },
      //immediate:true代表如果在 wacth 里声明了obj之后，就会立即先去执行里面的handler方法，
      immediate: false,
      deep: true // 开启深度监听，默认是false
    }
  },
  created() {
    this.getTeacher()
    this.getClass()
  },
  methods: {
    fallback() {
      this.$router.go(-1)
    },
    //搜索  老师列表
    getTeacher() {
      teacherList({ school_id: this.$store.state.user.school, pageSize: 99999999 })
        .then(res => {
          this.teacherList = res.data
        })
        .catch(err => {
          this.$message.error(err.data.message || '上课老师获取失败')
        })
    },
    getClass() {
      classList({ school_id: this.$store.state.user.school, pageSize: 99999999 })
        .then(res => {
          this.classList = res.data
        })
        .catch(err => {
          this.$message.error(err.data.message || '班级获取失败')
        })
    },
    changeDate() {},
    more() {
      this.advanced = !this.advanced
    }
  }
}
</script>

<style lang="less" scoped>
#moreButton {
  position: absolute;
  top: 24px;
  right: 20px;
}
</style>